<template>
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <!-- <img src="..." class="rounded me-2" alt="..."> -->
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      {{ toast.toastContent }}
    </div>
  </div>


</template>

<script setup>
//引入store钩子
import useCounterStore from '@/stores/counter.js'
//实现仓库数据双向绑定
import {storeToRefs} from 'pinia'

//创建仓库对象
const store=useCounterStore()
let {toast}=storeToRefs(store)




</script>

<style scoped>
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


</style>